<template>
  <div ref="radar" style="height:300px">Radar</div>
</template>

<script>
import * as echarts from 'echarts/core'
import { VisualMapComponent } from 'echarts/components'
import { RadarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([VisualMapComponent, RadarChart, CanvasRenderer])
export default {
  mounted() {
    var chartDom = this.$refs.radar
    var myChart = echarts.init(chartDom)
    var option

    option = {
      visualMap: {
        top: 'middle',
        right: 10,
        color: ['red', 'yellow'],
        calculable: true
      },
      radar: {
        indicator: [
          { text: 'IE8-', max: 400 },
          { text: 'IE9+', max: 400 },
          { text: 'Safari', max: 400 },
          { text: 'Firefox', max: 400 },
          { text: 'Chrome', max: 400 }
        ]
      },
      series: (function() {
        var series = []
        for (var i = 1; i <= 28; i++) {
          series.push({
            type: 'radar',
            symbol: 'none',
            lineStyle: {
              width: 1
            },
            emphasis: {
              areaStyle: {
                color: 'rgba(0,250,0,0.3)'
              }
            },
            data: [
              {
                value: [
                  (40 - i) * 10,
                  (38 - i) * 4 + 60,
                  i * 5 + 10,
                  i * 9,
                  (i * i) / 2
                ],
                name: i + 2000 + ''
              }
            ]
          })
        }
        return series
      })()
    }

    option && myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
::v-deep canvas{
    // width: 100px;
    // height: 100px;
    top: -150px !important;
    left: 45px !important
}
.DoughNut{
    height:50px;
    // position: absolute;
    // top: 60px;
}
</style>
